//导航   下拉菜单
//获取 a标签
var li = document.querySelectorAll(".list");
//console.log(li);
//获取 下拉菜单的内容
var list = document.querySelectorAll(".list div");
//console.log(list);

for(var i = 0; i < li.length; i++) {
	//移入事件
	li[i].addEventListener("mouseover", function() {
		this.children[1].style.display = 'block';
		this.firstElementChild.firstElementChild.style.transform='rotate(180deg)';
		this.firstElementChild.firstElementChild.style.borderTopColor='#FF6633';
	})
	for(var j = 0; j < li.length; j++) {
		//移出事件
		li[j].addEventListener("mouseleave", function() {
			this.children[1].style.display = "none";
			this.firstElementChild.firstElementChild.style.transform='rotate(360deg)';
			this.firstElementChild.firstElementChild.style.borderTopColor='';
		})
	}
}

//其他城市
var area = document.querySelector(".area>a");
var group = document.querySelector(".group");
var sp = document.querySelector(".area>span");
//console.log(area);
//点击事件
area.addEventListener("click", function() {
	group.style.display = 'block';
	sp.style.backgroundImage = 'url(img/area1.png)';
})
group.addEventListener("mouseleave", function() {
	this.style.display = 'none';
	sp.style.backgroundImage = 'url(img/area.png)';
})

//响应式轮播

 var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
    
    
//轮播侧边栏
//获取 li标签
var lis = document.querySelectorAll(".banner-b-left ul li");
//console.log(lis);
//获取 侧边栏的内容
var cbl = document.querySelectorAll(".sidebar");
//console.log(cbl);

for(var a = 0; a < lis.length; a++) {
	//移入事件
	lis[a].addEventListener("mouseover", function() {
		this.lastElementChild.style.display = 'block';
		this.style.background = '#605A5A';
	})
	for(var b = 0; b < lis.length; b++) {
		lis[b].addEventListener("mouseout", function() {
			this.lastElementChild.style.display = 'none';
			this.style.background = '';
		})
	}
}

//选项卡
var list = document.querySelectorAll(".ranking-title a");
var menu = document.querySelectorAll(".ranking-content>div");
var e = document.querySelectorAll(".ranking-title a p i");
var f = document.querySelectorAll(".ranking-title a p b");
//console.log(e);
//console.log(f);
for(var c = 0; c < list.length; c++) {
	list[c].index = c;
	list[c].addEventListener('mouseover', function() {
		for(var d = 0; d < list.length; d++) {
			list[d].classList.remove('active');
			menu[d].classList.remove('active');
			e[d].style.display = 'block';
			f[d].style.display = 'none';
		}
		this.classList.add('active');
		menu[this.index].classList.add('active');
		e[this.index].style.display = 'none';
		f[this.index].style.display = 'block';
	})
}

//json
var vm = new Vue({
	el: "#app",
	data: {
		massage: '正在请求数据...'
	},
	mounted() {
		axios
			.get('json/news.json')
			.then(response => (this.massage = response.data.urls))
			.catch(function(error) {
				console.log(error)
			})
	}
})

//楼层
//获取#top
var t = document.querySelector("#top");
window.onscroll = function() {
	var floor = document.querySelectorAll("#top ul li");
	//	console.log(document.documentElement.scrollTop);
	if(document.documentElement.scrollTop > 600 || document.body.scrollTop > 600) {
		t.style.display = 'block';
	} else {
		t.style.display = 'none';
	}
	var height = document.documentElement.scrollTop || document.body.scrollTop;
	console.log(height);

	for(var h = 0; h < floor.length; h++) {
		floor[h].firstElementChild.classList.remove('active');
		if(height >= 700 && height < 1300) {
			floor[0].firstElementChild.classList.add('active');
		} else if(height >= 1300 && height < 1900) {
			floor[1].firstElementChild.classList.add('active');
		} else if(height >= 1900 && height < 2500) {
			floor[2].firstElementChild.classList.add('active');
		} else if(height >= 2500 && height < 3100) {
			floor[3].firstElementChild.classList.add('active');
		} else if(height >= 3100 && height < 3400) {
			floor[4].firstElementChild.classList.add('active');
		} else if(height >= 3400 && height < 3800) {
			floor[5].firstElementChild.classList.add('active');
		} else if(height >= 3800 && height < 4400) {
			floor[6].firstElementChild.classList.add('active');
		} else {
			floor[7].firstElementChild.classList.add('active');
		}

		floor[0].addEventListener('click', function() {
			floor[0].firstElementChild.classList.add('active');
			window.scrollTo({
				top: 700,
				behavior: 'smooth'
			})
		})
		floor[1].addEventListener('click', function() {
			floor[1].firstElementChild.classList.add('active');
			window.scrollTo({
				top: 1300,
				behavior: 'smooth'
			})
		})
		floor[2].addEventListener('click', function() {
			floor[2].firstElementChild.classList.add('active');
			window.scrollTo({
				top: 1900,
				behavior: 'smooth'
			})
		})
		floor[3].addEventListener('click', function() {
			floor[3].firstElementChild.classList.add('active');
			window.scrollTo({
				top: 2500,
				behavior: 'smooth'
			})
		})
		floor[4].addEventListener('click', function() {
			floor[4].firstElementChild.classList.add('active');
			window.scrollTo({
				top: 3100,
				behavior: 'smooth'
			})
		})
		floor[5].addEventListener('click', function() {
			floor[5].firstElementChild.classList.add('active');
			window.scrollTo({
				top: 3400,
				behavior: 'smooth'
			})
		})
		floor[6].addEventListener('click', function() {
			floor[6].firstElementChild.classList.add('active');
			window.scrollTo({
				top: 3800,
				behavior: 'smooth'
			})
		})
		floor[7].addEventListener('click', function() {
			floor[7].firstElementChild.classList.add('active');
			window.scrollTo({
				top:4300,
				behavior: 'smooth'
			})
		})
		floor[8].addEventListener('click', function() {
			floor[8].firstElementChild.classList.add('active');
			window.scrollTo({
				top:0,
				behavior: 'smooth'
			})
		})
	}

}
